<template>
	<div class="info-item">
		<div v-if="!selectData">
			<div class="search-container">
				<el-form size="small" inline>
					<el-form-item label="成员名称" label-width="100px">
						<el-input v-model="searchData.name" placeholder="请输入" />
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="onSearch">查询</el-button>
						<el-button @click="onReset">重置</el-button>
					</el-form-item>
				</el-form>
			</div>
			<el-table class="el-table-modify" :data="tableData" border>
				<el-table-column type="index" align="center" label="序号 " width="60"></el-table-column>
				<el-table-column prop="name" align="center" label="成员名称"></el-table-column>
				<el-table-column prop="cellphone" label="联系电话"></el-table-column>
				<el-table-column prop="commissionRate" align="center" label="佣金比例"></el-table-column>
				<el-table-column prop="orderAmount" align="center" label="累计订单数"></el-table-column>
				<el-table-column prop="totalSales" align="center" label="销售金额"></el-table-column>
				<el-table-column prop="6" align="center" label="状态">
					<template slot-scope="scope">
						{{STATUS[scope.row.status]}}
					</template>
				</el-table-column>
				<el-table-column align="center" label="操作" width="100">
					<template slot-scope="scope">
						<el-button type="text" size="small" @click="showDetail(scope.row)">详情</el-button>
						<el-button v-if="scope.row.STATUS == 'NORMAL'"  type="text" size="small"  @click="pause(scope.row)">
							停用
						</el-button>
						<!-- <el-button v-else type="text" size="small"  @click="revover(scope.row)">启用</el-button> -->
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				ref="pagination"
				class="mt-20"
				background
				:page-size.sync="pageOption.pageSize"
				@size-change="onSizeChange"
				@current-change="onPageChange"
				:total="pageOption.total"
				layout="slot,->,prev,pager,next,sizes,jumper"
			>
				<span
					class="pagination-title"
				>共 {{pageOption.total}} 条记录 第 {{pageOption.page}} / {{pageOption.pageTotal}} 页</span>
			</el-pagination>
		</div>
		<div v-else class="detail-container">
      <el-row>
        联系人：<span class="detail-value">{{profileInfo.name}}</span>
      </el-row>
      <el-row>
        联系电话：<span class="detail-value">{{profileInfo.phone}}</span>
      </el-row>
      <el-row type="flex">
        <el-col style="width: auto;">
          代理产品
        </el-col>
        <el-col style="flex: 1;">
          <el-row v-for="product in profileInfo.products" :key="product.productId">
            <span class="detail-value">{{product.productName}}</span>
            价格：<span class="detail-value">{{product.price}}元</span>  
            佣金：<span class="detail-value">{{product.price * product.commissionRate }}元</span>  
            <el-button size="mini" type="primary">查看详情</el-button>
          </el-row>
        </el-col>
      </el-row>
      <el-row>
        状态：<span class="detail-value">{{STATUS[profileInfo.status]}}</span>
      </el-row>
      <el-row>
        二级团队数量：<span class="detail-value">{{profileInfo.secondPartnerAmount}}</span>
      </el-row>
			<div class="detail-toolbar">
				<el-button size="small" @click="cancel">取消</el-button>
			</div>
		</div>
	</div>
</template>

<script>
import { dealePartnersQuery, 
	partnerPause, 
	partnerProfile } from "@/api/dealerMgt";
import {STATUS} from '@/utils/const'
export default {
	components: {},
  name: "partnersList",
  props: ['id'],
	data() {
		return {
			STATUS,
			searchData: {
				name: ""
			},
			tableData: [],
			pageOption: {
				page: 1,
				pageSize: 20,
				total: 0,
				pageTotal: 1
			},
			selectData: null,
			profileInfo: {
				products: []
			}
		};
	},
	methods: {
		onSearch() {
			this.pageOption.page = 1;
			this.requestData();
		},
		onReset() {
			this.pageOption.page = 1;
			this.searchData.name = "";
			this.requestData();
		},
		async requestData() {
			const { page, pageSize: size } = this.pageOption;
			const postData = {};
			Object.keys(this.searchData).forEach(key => {
				if (this.searchData[key]) {
					postData[key] = this.searchData[key];
				}
			});

			const { data, total } = await dealePartnersQuery(this.id, {
				page: page - 1,
				size,
				...postData
			});
			this.tableData = data;
			this.pageOption.total = total || 0;
			this.pageOption.pageTotal = total ? Math.ceil(total / size) : 1;

			if (this.$refs.pagination) {
				let childrenRefs = this.$refs.pagination.$children;
				this.$nextTick(() => {
					childrenRefs.forEach(child => child.$forceUpdate());
				});
			}
		},
		onSizeChange(size) {
			this.pageOption.pageSize = size;
			this.requestData();
		},
		onPageChange(page) {
			this.pageOption.page = page;
			this.requestData();
		},
		showDetail(row) {
      this.selectData = row;
      this.profileInfo = {
				products: []
			}
		},
		cancel() {
			this.selectData = null;
    },
    async pause(row) {
      try {
				await partnerPause(row.partnerId);
				this.requestData()
        this.$message.success('暂停成功')
      } catch (error) {
        console.log(error);
      }
		},
		async recover() {
			
		},
    async requestPartnerProfile(id) {
      try {
        const {data} = await partnerProfile(id);
        this.profileInfo = data
      } catch (error) {
        console.log(error);
      }
    }
	},
	created() {
		this.requestData();
	}
};
</script>

<style scoped lang="scss">
</style>
